import { defineComponent, ref } from "vue";
import styles from "./account.module.less";
import HeaderUserCenter from "@/components/HeaderUserCenter/HeaderUserCenter";
import Footer from "@/components/Footer/Footer";
import { RouterView, useRoute, useRouter } from "vue-router";
import LoginPopup from "@/components/LoginPopup/LoginPopup";

export default defineComponent({
  name:'account',
  setup() {
    // 主体部分
    const router = useRouter();
    const route = useRoute();
    const menuTreeState = ref([
      {
        name: '个人信息',
        path: '/account/usercent',
      },
      {
        name: '企业信息',
        path: '/account/Qyinform',
      },
      {
        name: '账号安全',
        path: '/account/userinfo',
      },
    ])

    const menuItemClick = (path: string) => {
      if (route.matched[1].path === path) {
        return;
      }
      const dom: any = document.getElementById("app");
      dom.scrollTop = 0;
      router.push(path);
    }

    const Main = () => (
      <div class={styles.main}>
        <div class={styles['main-container']}>
          <div class={styles['main-menu']}>
            <div class={styles['menu-title']}>账号设置</div>
            {
              menuTreeState.value.map((item) => (
                <div class={[styles['menu-item'], route.matched.map(x => x.path).includes(item.path) && styles.checked]} onClick={() => { menuItemClick(item.path) }}>
                  {item.name}
                </div>
              ))
            }
          </div>
          <div class={styles['main-content']}>
            <RouterView />
          </div>
        </div>
      </div>
    )
    //执行登录
    const toLogin = () => {
      LoginPopupRef.value.open();
    }
    
    const LoginPopupRef = ref(null as any);

    return () => (
      <div class={styles.account}>
        <HeaderUserCenter onToLogin={() => { toLogin() }} />
        <Main />
        <Footer />
        <LoginPopup ref={LoginPopupRef} />
      </div>
    )
  }
})